<template>
	<view class="content">
		<view class="UCenter-bg">
			<view class="UCenter-Info" v-if="company!=null">
				<image class="round" :src="$constant.IMG_VERSION == $constant.OSS?company[selectedIndex[0]].personphoto:$constant.BASEURL+company[selectedIndex[0]].personphoto"
				 mode="aspectFill"></image>
				<view class="text-xl">{{company[selectedIndex[0]].phone}}({{company[selectedIndex[0]].personname}})
					<!-- <text class="text-df">({{userinfo.personname}})</text> -->
				</view>
				<view @click="showPicker=true" class="margin-top-sm">
					{{company[selectedIndex[0]].departname}}
					<text class="cuIcon-unfold" style="padding-left: 8upx;"></text>
					<!-- <picker @change="bindPickerChange" :value="index" :range="company" range-key="departname">
						<text>{{company[index].departname}}</text>
						<text class="cuIcon-unfold" style="padding-left: 8upx;"></text>
					</picker> -->
				</view>
			</view>
			<!-- <image src="http://sq.lsyat.com/h5/static/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
		</view>

		<view class="padding flex text-center text-grey bg-white shadow-warp">
			<navigator url="approval/approval" class="flex flex-sub flex-direction solid-right">
				<view class="text-xxl text-orange">{{total.stay}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-attentionfill"></text>{{i18n.approval}}</view>
			</navigator>
			<navigator url="approval/approved" class="flex flex-sub flex-direction solid-right">
				<view class="text-xxl text-blue">{{total.stays}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-favorfill"></text>{{i18n.approved}}</view>
			</navigator>
			<navigator url="approval/launched" class="flex flex-sub flex-direction">
				<view class="text-xxl text-green">{{total.launch}}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-fork"></text>{{i18n.launched}}</view>
			</navigator>
		</view>

		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
			<!-- 	<view class="cu-item arrow">
				<navigator url="attendance-record/attendance-record" class="content" hover-class="none">
					<text class="cuIcon-locationfill text-cyan"></text>
					<text class="text-grey">考勤记录</text>
				</navigator>
			</view> -->
			<view class="cu-item arrow">
				<navigator url="../index/leave/leaverecord" class="content" hover-class="none">
					<text class="cuIcon-formfill text-green"></text>
					<text class="text-grey">{{i18n.leaveRecord}}</text>
				</navigator>
			</view>
			<!-- 		<view class="cu-item arrow">
				<view class="content" bindtap="showQrcode">
					<text class="cuIcon-appreciatefill text-red"></text>
					<text class="text-grey">加班记录</text>
				</view>
			</view> -->
			<view class="cu-item arrow">
				<navigator url="../index/attendance/repair-record" class="content" hover-class="none">
					<text class="cuIcon-writefill text-cyan"></text>
					<text class="text-grey">{{i18n.repairRecord}}</text>
				</navigator>
			</view>
			<view class="cu-item arrow">
				<navigator url="../index/business-travel/business-travel-record" class="content" hover-class="none">
					<text class="cuIcon-creativefill text-orange"></text>
					<text class="text-grey">{{i18n.travelRecord}}</text>
				</navigator>
			</view>
			<view v-if="showBind" @click="unbind" class="cu-item arrow">
				<view class="content" hover-class="none">
					<text class="cuIcon-creativefill text-orange"></text>
					<text class="text-grey">解除绑定</text>
				</view>
			</view>
		</view>
		<!-- <view class="cu-tabbar-height"></view> -->
		<sPicker :cancelText="$t('cancel')" :confirmText="$t('sure')" @confirm="confirm" :visible.sync="showPicker" :list="[company]"
		 textKey="departname" v-model="selectedIndex"></sPicker>
	</view>
</template>

<script>
	import sPicker from '@/components/s-picker/index.vue';
	export default {
		components: {
			sPicker
		},
		computed: {
			i18n() {
				return this.$t('myself')
			},
		},
		data() {
			return {
				showPicker: false,
				selectedIndex: [0],
				total: '',
				company: null,
				showBind: true
				// index: 0
			}
		},
		onShow() {
			this.getMessage()
		},
		onLoad() {
			this.$constant.checkUserInfo()
			console.log(this.$constant.BASEURL)
			if (getApp().globalData.version == this.$constant.PROJECT_YINNI) {
				this.showBind = false
				console.log('MySelf')
				this.getIndMyInfo()
			} else {
				this.getMySelf()
			}
		},
		methods: {
			unbind() {
				let that = this
				uni.showModal({
					title: this.$t('notice'),
					cancelText: this.$t('cancel'),
					confirmText: this.$t('sure'),
					content: '确定要解除绑定吗?',
					success(res) {
						if (res.confirm) {
							that.goUnBind()
						}
					}
				})
			},
			changeInfo() {
				let info = this.company[this.selectedIndex[0]];
				this.$router.push({
					path:'userinfo-change/userinfo-change',
					query:{info:info}
				})
			},
			goUnBind() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.UNBIND_USER,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: getApp().globalData.userid
					},
					success: (res) => {
						//跳转到首页
						let result = res.data
						console.log(result)
						uni.showToast({
							title: result.message,
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading()
					},
					fail() {
						uni.showToast({
							title: _self.$t('netErrors'),
							icon: 'none'
						})
					}
				});
			},
			confirm(e) {
				// console.log(e[0])
				let index = e[0]
				if (this.selectedIndex[0] != index) {
					// console.log('change')
					// this.index = index
					this.selectedIndex = e
					this.selectCompany(this.company[index], index)
				}
			},
			// bindPickerChange: function(e) {
			// 	let index = e.target.value
			// 	if (this.index != index) {
			// 		console.log('change')
			// 		// this.index = index
			// 		this.selectCompany(this.company[index], index)
			// 	}
			// },
			selectCompany(item, index) {
				uni.showLoading({
					title: this.$t('loading')
				})
				uni.request({
					url: this.$constant.BASEURL + this.$constant.SELECT_COMPANY,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: item.id,
						userid: item.userid
					},
					success: (res) => {
						//跳转到首页
						let result = res.data
						console.log(result)
						if (result.code == 0) {
							this.index = index
							getApp().globalData.unitno = this.company[index].unitno
							getApp().globalData.userid = this.company[index].userid
							this.getMessage()
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					},
					fail() {
						uni.showToast({
							title: _self.$t('netErrors'),
							icon: 'none'
						})
					}
				});
			},
			getMessage() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_MESSAGE_TOTAL,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userid: getApp().globalData.userid,
					},
					complete: (res) => {
						// console.log(res.data)
						if (res.data.code == 0) {
							//重新刷新数据
							this.total = res.data.data
						}
					}
				})
			},
			getMySelf() {
				console.log(getApp().globalData.openid)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_MYSELF_INFO,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: getApp().globalData.openid,
					},
					complete: (res) => {
						let that = this
						console.log('getMySelf', res.data)
						if (res.data.code == 0) {
							//重新刷新数据
							let data = res.data.data
							if (data == null || typeof(data) == 'undefined') return
							that.company = data
							data.forEach(function(item, index) {
								if (item.default == 1) {
									console.log('11111111111111111')
									console.log(index)
									// that.index = index
									that.selectedIndex[0] = index
								}
							})
						}
					}
				})
			},
			getIndMyInfo() {
				let phone = ''
				uni.getStorage({
					key: 'userinfo',
					success: function(res) {
						var result = res.data
						// console.log(result)
						if (result.username != '') {
							phone = result.username
						}
					},
					fail() {
						console.log("getStorage error")
					}
				})
				if (phone == '') {
					uni.showToast({
						title: '无法获取用户信息',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_MYSELF_INFO,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						phone: phone,
						type: 2
					},
					complete: (res) => {
						let that = this
						console.log('getMySelf', res.data)
						if (res.data.code == 0) {
							//重新刷新数据
							let data = res.data.data
							if (data == null || typeof(data) == 'undefined') return
							that.company = data
							data.forEach(function(item, index) {
								if (item.default == 1) {
									that.index = index
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.UCenter-bg {
		/* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		background-color: #5599ff;
		background-size: cover;
		height: 500rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-Info {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		margin: 25upx;
		width: 180rpx;
		height: 180rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
</style>
